<template>
  <div class="db-outer2">
    <div class="db-middle">
      <div class="db-floor pt-5 pb-5">
        <h2 class="floors-h2">名家荐书</h2>
        <div class="d-flex justify-content-between">
          <div class="db-card" v-for="(item, i) of arr" :key="i">
            <div class="card-hd">
              <span class="card-avater"
                ><img :src="src" alt="" class="card-avater-img"
              /></span>
              <span class="card-name">陈楸帆</span>
              <span class="card-text">本月推荐：</span>
            </div>
            <div class="card-bd mt-3">
              <div class="card-item mb-4 d-flex">
                <div class="card-pic mr-3">
                  <a href="#">
                    <img :src="src1" alt="" class="card-item-img" />
                  </a>
                </div>
                <div class="card-info">
                  <h4 class="card-info-h4">
                    <a href="#"><span>山海城</span></a>
                  </h4>
                  <div class="card-author">
                    <a href="#" class="box-a"
                      ><span class="box-span2">魏市宁</span></a
                    >
                  </div>
                  <div>
                    <span>9.2</span>
                    <a href="#" class="card-aa">言情</a>
                  </div>
                </div>
              </div>
              <div class="card-txts">
                漫画式的冒险展开，中国元素的有机融入，对《山海经》的呼应，在呈现万物有灵的世界观时，带着温度和童真。
              </div>
              <div class="f-t">
                <a href="#" class="ft-ckxq">查看详情</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: "./image/up/up.jpg",
      src1: "./image/books/1_22.jpg",
      arr: [1, 2, 3],
    };
  },
};
</script>

<style lang="scss">
.floors-h2 {
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
}
.db-outer2 {
  width: 100%;
  background-color: #fff;
  .db-middle {
    width: 100%;
    min-width: 1320px;
    margin: 0 auto;
    .db-floor {
      width: 1200px;
      margin: 0 auto;
      padding-top: 10px;
      box-sizing: content-box;
      margin-right: auto;
      margin-left: auto;
      padding-right: 60px;
      padding-left: 60px;
      .db-card {
        display: inline-block;
        box-sizing: border-box;
        margin: 40px 10px 0;
        padding: 20px 20px 0;
        width: calc(((100% - 40px) / 3));
        background: #fcfbf9;
        vertical-align: top;
        text-align: left;
        .card-hd {
          .card-avater {
            flex: none;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            text-align: center;
            overflow: hidden;
            margin-right: 5px;
            .card-avater-img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
          .card-name {
            margin-right: 5px;
            color: #333;
            font-weight: bold;
            font-size: 13px;
          }
          .card-text {
            font-size: 13px;
            color: #777;
          }
        }
        .card-bd {
          .card-item {
            a {
              width: 80px;
              height: 120px;
              color: #000;
            }
            .card-item-img {
              width: 80px;
              height: 120px;
              border-radius: 4px;
              opacity: 1;
            }
          }
          .card-info {
            .card-info-h4 {
              margin-bottom: 4px;
              color: #333;
              font-weight: bold;
              font-size: 16px;
              line-height: 1.25;
            }
            .card-aa {
              font-size: 12px;
              line-height: 16px;
              color: #777;

              .card-aa:hover {
                color: rgb(36, 180, 206);
              }
            }
          }
          .card-txts {
            position: relative;
            margin: 20px 30px 0 0;
            padding: 4px 15px;
            font-size: 14px;
            color: #333;

            &::after,
            &::before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
            }

            &::before {
              left: 0;
              top: 0;
              border-top: 1px solid rgb(166, 166, 166);
              border-left: 1px solid rgb(166, 166, 166);
            }

            &::after {
              right: 0;
              bottom: 0;
              border-bottom: 1px solid rgb(166, 166, 166);
              border-right: 1px solid rgb(166, 166, 166);
            }
          }
        }
      }
    }
  }
}
.box-span2 {
  font-size: 12px;
  color: #777;
}
.f-t {
  text-align: center;
  line-height: 1;
}

.f-t .ft-ckxq {
  display: block;
  padding: 15px 0;
  color: #389eac;
}

</style>